<template>
    <div class="querylist">
        <scroll ref="scroll" class="scroll-content">
            <div class="scroll-warpper">
                <ul class="list-box" v-if="orderList">
                    <li class="item" v-for="item in orderList">
                        <div class="item-top">
                            <div class="code">{{item.order_code}}</div>
                            <div class="state" v-for="state in flowInfo" v-if="state.id==item.order_state">{{state.title}}</div>
                        </div>
                        <div class="item-body">
                            <img :src="item.phone.img" width="60" height="60"/>
                            <div class="body-center">
                                <div class="brand">{{item.phone.brand}} {{item.phone.model}}</div>
                                <div class="way" v-if="item.order_way==1">邮寄回收</div>
                            </div>
                            <div class="price">回收价：￥{{item.price}}</div>
                            <router-link tag="div" :to="'/hsqlogin/hsqcenter/hsqdetail?order_code='+item.order_code" class="next-btn">查看详情</router-link>
                        </div>
                        <div class="item-bottom">
                            <div class="text">下单时间：</div>
                            <div class="time">{{item.order_createtime|formatDate}}</div>
                        </div>
                    </li>
                </ul>
                <!-- 如果不存在订单 -->
                <div class="no-order" v-if="orderList.length == 0">
                    <div class="no-wrapper">
                        <img src="../../common/image/sorry.gif" width="120" height="120"/>
                        <div class="text">您目前没有任何订单！</div>
                        <router-link class="search-btn" tag="div" :to="'/hschoice'">我要下单</router-link>
                    </div>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
import {mapMutations, mapGetters} from 'vuex'
import Scroll from '../../base/scroll/scroll.vue'           //缓动框架
import ButtonMedium from '../parts/buttonMedium.vue'    //按钮
export default {
    data() {
        return {
            orderList: [],      //订单列表
            flowInfo: [],       //流程步骤
        }
    },
    computed: {
        // 获取vuex用户对象的电话
        ...mapGetters([
            'user_tel'
        ])
    },
    components: {Scroll,ButtonMedium},
    created() {
        this.getOrder()
        this.getFlowInfo()
    },
    methods: {
        // 获取所有用户订单（本地数据）
        getOrder() {
            var str = localStorage.getItem('hs_order')
            var strObj = JSON.parse(str)
            if(!strObj) return
            strObj.forEach(item=>{
                if(item.user.tel==this.user_tel){
                    // console.log(item)
                    this.orderList.push(item)
                }
            })
            console.log(this.orderList)
        },
        //获取流程步骤信息
        async getFlowInfo() {
            var result = await this.$ajax('/flow')
            if(result.status == 200) {
                this.flowInfo = result.data
            }
            // console.log(this.flowInfo)
        },
    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";
    .scroll-content{
        position:fixed;
        left:0;
        top:0px;
        bottom:0;
        width:100%;
        overflow:hidden;
        background:@color-gray-bg;
        z-index:91;
        .scroll-warpper{
            .list-box{
                .item{
                    background:#fff;
                    margin-bottom:10px;
                    padding:10px;
                    position:relative;
                    .item-top{
                        display:flex;
                        padding-bottom:10px;
                        border-bottom:1px solid @color-alert-line;
                        font-size:14px;
                        .code{
                            flex:1;
                            color:@color-alert-title;
                        }
                        .state{
                            flex:1;
                            text-align:right;
                            color:@color-alert-title;
                        }
                    }
                    .item-body{
                        padding:10px;
                        display:flex;
                        img{
                            flex:0 0 60px;
                        }
                        .body-center{
                            flex:1;
                            margin-left:10px;
                            .brand{
                                font-size:14px;
                                color:@color-alert-title;
                            }
                            .way{
                                font-size:12px;
                                color:@color-red;
                                background:@color-gray-btn;
                                display:inline-block;
                                padding:2px 5px;
                                margin-top:10px;
                            }
                        }
                        .price{
                            flex:1;
                            font-size:14px;
                            color:@color-alert-title;
                            text-align:right;
                        }
                        .next-btn{
                            position:absolute;
                            bottom:10px;
                            right:10px;
                            font-size:14px;
                            color:@color-blue;
                        }
                    }
                    .item-bottom{
                        
                        border-top:1px solid @color-alert-line;
                        padding-top:10px;
                        .text{
                            font-size:14px;
                            color:@color-alert-con;
                            display:inline-block;
                        }
                        .time{
                            font-size:12px;
                            color:@color-alert-gray;
                            display:inline-block;
                        }
                    }
                }
            }
            //没有任何订单
            .no-order{
                text-align:center;
                margin:50px 0 20px;
                img{
                    margin:50px 0;
                }
                .text{
                    color:@color-alert-title;
                    font-size:14px;
                    margin-bottom:20px;
                }
                .search-btn{
                    font-size:16px;
                    color:@color-blue;
                }
            }
        }
    }
</style>
